<template>
    <div>
        <pt-table :data="data" url="roles" ref="tableRef"></pt-table>
        <pt-form type="dialog" url="roles" :rules="formData" ref="formRef"></pt-form>
        <el-dialog
            v-model="viewData.isShowSetting"
            :title="'【' + viewData.title + '】' + '权限选择'"
            width="600"
            @close="handleDiaClose"
        >
            <el-scrollbar max-height="30rem" v-loading="viewData.loading">
                <el-tree
                    :data="viewData.treeData"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :default-checked-keys="viewData.defaultSelected"
                    :props="{ label: 'title' }"
                    style="width: 100%"
                    @check="handleCheck"
                ></el-tree>
            </el-scrollbar>
            <template #footer>
                <el-button type="primary" @click="handleEditRolePermissions" :disabled="viewData.loading">
                    提交
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { system } from '@/api'

const formRef = ref()
const tableRef = ref()

onMounted(() => {
    tableRef.value.action.setFormRef(formRef)
    tableRef.value.action.on('setting', handleSet)
})

const viewData = ref({
    id: 0,
    data: {},
    title: '',
    fromData: {},
    treeData: [],
    defaultSelected: [],
    postSelectedData: [],
    loading: false,
    isShowSetting: false,
})

const handleSet = async (data: any) => {
    viewData.value.title = data.title
    viewData.value.loading = true
    viewData.value.isShowSetting = true
    viewData.value.id = data.id
    try {
        const res = await system.getRolePermissions(data.id)
        viewData.value.treeData = res.data.results
        viewData.value.defaultSelected = res.data.checked
    } catch (e) {
        console.error(e)
    }
    viewData.value.loading = false
}

const handleCheck = (obj: any, checkedKeys: any) => {
    viewData.value.postSelectedData = checkedKeys.checkedKeys
}

const handleEditRolePermissions = async () => {
    viewData.value.loading = true
    try {
        await system.postRolePermissions(viewData.value.id, viewData.value.postSelectedData)
        viewData.value.isShowSetting = false
    } catch (e) {}
    viewData.value.loading = false
}

const handleDiaClose = () => {
    viewData.value.id = 0
    viewData.value.defaultSelected = []
    viewData.value.postSelectedData = []
}

const data = {
    header: {
        searchExtend: false,
        buttons: ['add', 'del', 'refresh'],
    },
    column: [
        { type: 'selection' },
        { prop: 'id', label: 'ID', width: '70', sortable: true },
        { prop: 'title', label: '角色名称' },
        { prop: 'name', label: '角色权限' },
        { prop: 'note', label: '备注' },
        { prop: 'status', label: '状态', render: 'switches' },
        {
            label: '操作',
            width: '180',
            fixed: 'right',
            buttons: [{ icon: 'setting', event: 'setting', type: 'warning' }, 'edit', 'del'],
        },
    ],
}

const formData = {
    title: '角色管理',
    rules: [
        { field: 'name', label: '权限名称', required: true },
        { field: 'title', label: '角色名称', required: true },
        { field: 'note', label: '备注说明', required: false, type: 'textarea' },
    ],
}
</script>

<style scoped lang="scss"></style>
